<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航守卫 </title>
</head>
<!-- 
    导航守卫

路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。
对此，vue-route 提供了实现导航守卫（navigation-guards）的功能。

你可以使用 router.beforeEach()函数 注册一个全局前置守卫，每个守卫方法接收三个参数：

1.  to：即将要进入的目标路由对象（去哪里），可以使用 to.path 获取即将要进入路由地址。 
2.  from：当前导航正要离开的路由对象（从哪来），可以使用 from.path 获取正要离开的路由地址。 
3.  next：一个函数，表示继续执行下一个路由。（如果没有next，将不会进入到下一个路由） 

下面例子中实现了如下功能：列举需要判断登录状态的 “路由集合”，当跳转至集合中的路由时：

● 如果是“未登录状态”，则一律跳转到登录页面
● 如果是“已登录状态”，则可以跳转到相应页面
 -->

<body>
    <div id="app">
        <p>
            <router-link to="/home">home</router-link>&nbsp;
            <router-link to="/news">news</router-link>&nbsp;
            <router-link to="/login">login</router-link>
        </p >
        <router-view></router-view>
    </div>

    <script src="https://unpkg.com/vue@3.0.11"></script>
    <script src="https://unpkg.com/vue-router@4.0.6"></script>

    <script type="text/javascript">
        const Home = {
            template: '<div>首页</div>'
        }
        const News = {
            template: '<div>新闻</div>'
        }
        const Login = {
            template: '<div>登录</div>'
        }

        const routes = [
            {
                path: '/',
                redirect: '/login'
            }, {
                path: '/home',
                component: Home
            }, {
                path: '/news',
                component: News
            }, {
                path: '/login',
                component: Login
            }
        ]

        const router = VueRouter.createRouter({
            history: VueRouter.createWebHashHistory(),
            routes: routes
        })

        Vue.createApp({
            data() {
                return { }
            }
        }).use(router).mount('#app');

        // 添加全局路由守卫
        router.beforeEach((to, from, next) => {
            //创建守卫规则集合(这里表示'/home'与'/news'路径是需要权限验证的)
            const nextRoute = ['/home', '/news'];
            // 使用isLogin来模拟是否登录
            let isLogin = false;
            // 判断to.path(要跳转的路径)是否是需要权限验证的
            if (nextRoute.indexOf(to.path) >= 0) {
                if (!isLogin) {
                    router.push({
                        path: '/login'
                    })
                    //location.reload(); 
                }
            }
            next(); //必须要有
        });
    </script>
</body>

</html>
